import React, { Component } from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Avatar, Tools, Button } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import { renderLoading, renderNoData } from '../public';
import BackTop from '../../public/back-to-top';
import { openHrmCard } from '../../util';
const getLabel = Tools.getLabel;

@withRouter
@inject('communicationStore')
@observer
export default class QuitedList extends Component {
  static defaultProps = {
    prefixCls: 'cowork-communication-quited',
  }

  componentWillMount () {
    const { location: { search }, coworkId, communicationStore: { quitedListStore } } = this.props;
    let id = (search.match(/id=(\S*)/) && search.match(/id=(\S*)/)[1]) || coworkId || '';
    quitedListStore.setStoreState({coworkId: id})
  }

  componentDidMount() {
    const { communicationStore: { quitedListStore }, location: { pathname } } = this.props;
    const { inital } = quitedListStore;
    inital(pathname);
  }

  getTemplate = () => {
    const newTemp = {
      default: [
        {
          key: 'col_1',
          style: { flex: 'none'},
          render: (data) => {
            const { username, imageUrl,userid } = data;
            return (
              <Avatar userId = {userid || ''} url={imageUrl || ''} name={username || ''} />
            )
          }
        },
        {
          key: 'col2',
          style: { flex: 'none',color:'#55B1F9' },
          configs: [
            { key: 'row1', configs: [{ key: 'username' ,style: {color:'#55B1F9'}}] }, 
            { key: 'row2', configs: [{ key: 'subCompanyName' }] }
          ]
        },
        {
          key: 'col3',
          configs: [
            { key: 'row1', configs: [{ key: 'jobtitle' }] }, 
            { key: 'row2', configs: [{ key: 'departmentName' }] }
          ]
        }
      ]
    }
    return newTemp;
  }
  
  render() {
    const { prefixCls, communicationStore: { quitedListStore } } = this.props;
    const { quitList, loading, doQuitSelectAll, doQuitSelectNone, reJoinCowork } = quitedListStore;
    const quitSelectedKeys = quitList && toJS(quitList.selectedRowKeys);
    const datas = quitList && toJS(quitList.data);
    if (loading) return renderLoading;
    if (datas && datas.length === 0) return renderNoData;
    return (
      <div className={prefixCls}>
        <div className={`cowork-template-top ${prefixCls}-choose`}>
          <span className={`${prefixCls}-choose-person`}>{getLabel(31503,"已选择")}{quitSelectedKeys.length}{getLabel('513244','个人员')}</span>
          {quitSelectedKeys.length !== datas.length ?
            <span className="cowork-template-top-all" onClick={doQuitSelectAll}>{getLabel(556, '全选')}</span> :
            <span className="cowork-template-top-all" onClick={doQuitSelectNone}>{getLabel(387379,"取消全选")}</span>
          }
        </div>
        <div className={`${prefixCls}-list`}>
          <BackTop
            visibilityHeight='200'
            modal
            useQuery
            target={`.${prefixCls}-list .wm-list-view-page-modal-scrollview`}
          >
            <ListViewPage.Normal
              store={quitList}
              rowKey='userid'
              customHeight='100%'
              getDataCustom
              showCheck
              getTemplate={this.getTemplate}
              onRowClick={(rowData) => {openHrmCard(rowData.userid)}}
            />
          </BackTop>
        </div>
        <div className={`${prefixCls}-btn`}>
          <Button type="primary" disabled={quitSelectedKeys.length === 0} onClick={reJoinCowork}>{getLabel('513243','重新加入协作') }</Button>
        </div>
      </div>
    )
  }
}
